<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}" />
    <title>花卉识别</title>
</head>

<body>
    <div class="bg1">
        <h1 style="font-size: 50px;">花卉识别</h1>
    </div>

    <form action="" enctype='multipart/form-data' method='POST' >
        <table class="t1">
            <td>
                <a href="javascript:;" class="file">选择文件<input type="file" name="file" id=""></a>
            </td>
            <td>
                <input class="file1" type="submit" value="开始识别" />
            </td>
        </table>
    </form>

<div class="bg2">

</div>
<div class="bg3">
    <table>
        <tr>
            <td>
                <h2 align="center">识别结果</h2>
                <hr>
            </td>
        </tr>
        <tr>
            <td>
                <h2 align="center">百度百科</h2>
                <hr>

            </td>
        </tr>
    </table>

</div>
</body>

<script src="{{url_for('static', filename='js/jquery-3.4.1.js')}}"></script>

<script type="text/javascript">
    $(function () {

        $(".file").on("change","input[type='file']",function(){
            var filePath=$(this).val();
            if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
                $(".fileerrorTip").html("").hide();
                var arr=filePath.split('\\');
                var fileName=arr[arr.length-1];
                $(".showFileName").html(fileName);
            }else{
                $(".showFileName").html("");
                $(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
                return false
            }
        });

    });
</script>
</html>
